<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的收藏</title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../../../css/common.css" stylesheet" />
		<link rel="stylesheet" href="../../../../css/style.css" stylesheet" />
		<!-- <link rel="stylesheet" href="./css/index.css" stylesheet /> -->
		<link rel="stylesheet" type="text/css" href="css/index.css" />
	</head>
	<body>
		<div class="mui-content">
			<div class="none">
				<img src="../../../../images/nonedata/icon_default_collect.png">
			</div>
			<!-- <div class="main flex">
				<div class="left">
					<img class="img" src="../../../../images/headlines/face.jpg">
				</div>
				<div class="right">
					<h1 class="title txt-cut-two">标题长度最多展示两行超出2行部分显示
						省略号</h1>
					<p class="num">编号:1234</p>
					<p class="price"><i>￥</i><span>69.80</span></p>
				</div>
			</div> -->
		</div>
	</body>
	<script src="../../../../js/mui.min.js"></script>
	<script src="../../../../js/jquery-3.4.1.min.js"></script>
	<script src="../../../../js/resize.js" type="text/javascript"></script>
	<script type="text/javascript">
		// 文档一加载就执行
		$(function() {
			obj.setRem()
			// 窗口调节
			$(window).resize(function() {
				obj.setRem()
			});
			// 收藏模拟数据
			function setCollectData() {
				let data = [
					{
						imgSrc: '../../../../images/headlines/face.jpg',
						title: '标题长度最多展示两行超出2行部分显示省略号',
						num: '1234',
						price: '68.80'
					},
					{
						imgSrc: '../../../../images/headlines/face.jpg',
						title: '标题长度最多展示两行超出2行部分显示省略号',
						num: '1234',
						price: '68.80'
					},
					{
						imgSrc: '../../../../images/headlines/face.jpg',
						title: '欧莱雅黑精华抗衰老紧致补水保湿精华液官方正品50mL  今日待定下单即赠新品',
						num: '1234',
						price: '68.80'
					}
				]
				if (data.length > 0) {
					let strHtml = '';
					data.forEach(item => {
						strHtml +=
							`<div class="main flex">
			                	<div class="left">
				                	<img class="img" src=${item.imgSrc}>
			                 	</div>
			            	    <div class="right">
				            	<h1 class="title txt-cut-two">${item.title}</h1>
					            <p class="num">编号:${item.num}</p>
				            	<p class="price"><i>￥</i><span>${item.price}</span></p>
			                	</div>
		                	</div>`
					})
					$('.none').css('display', 'none')
					$('.mui-content').html(strHtml)

				} else {
					$('.none').css('display', 'block')
				}
			}
			setCollectData()
		})
	</script>
</html>
